<template>
  <div class="layout mainContent">
    <Layout class="page">
      <!-- 头部 -->
      <Header class="header">
        <span style="color: #fff">通用后台管理系统</span>
      </Header>
      <Layout :style="{height: publicHeight}">
        <!-- 菜单 -->
        <Sider hide-trigger :style="{background: '#fff'}">
          <Menu :active-name="activeName" theme="light" width="auto" accordion>
            <div v-for="(item, index) in menuList.menuList" :key="index">
              <!-- 一级菜单 -->
              <MenuItem v-if="item.list == null || item.list.length == 0" :name="item.id" @click.native="navigateTo(item)">
                <Icon :type="item.icon" size="16" style="margin-top: -2px;"></Icon>
                <span>{{item.name}}</span>
              </MenuItem>
              <!-- 二级菜单 -->
              <Submenu :name="item.id" v-if="item.list&&item.list.length !== 0">
                <template slot="title">
                  <Icon type="ios-keypad" style="margin-top: -2px;"></Icon>
                  <span>{{item.name}}</span>
                </template>
                <MenuItem :name="child.id"  v-for="(child, index) in item.list" :key="index" @click.native="navigateTo(child)">{{child.name}}</MenuItem>
              </Submenu>
            </div>
          </Menu>
        </Sider>
        <!-- 内容 -->
        <Layout style="padding-left: 10px;">
          <Content :style="{width: contentWidth, padding: contentPadding, minHeight: '280px', background: '#fff'}">
            <!-- 组件切换时添加过渡效果 -->
            <transition name="slide-left" mode="out-in" :duration="100">
              <router-view></router-view>
            </transition>
          </Content>
        </Layout>
      </Layout>
    </Layout>
  </div>
</template>

<script>
import {GET, POST} from '@/axios/index' //  封装的axios方法
import APIUrl from '@/axios/url'  //  全局请求路径
export default {
  name: 'mainContent',
  data () {
    return {
      activeName: 1,  //  选中菜单项
      contentWidth: '',  // main 宽度
      contentPadding: '10px', // main 内边距
      publicUrl: APIUrl,  //  全局请求地址
      publicHeight: null,
      menuList: require('../json/menu.json')  //  菜单数据
    }
  },
  watch: {
    '$route': 'getPath' //  监听路由变化,改变组件内边距
  },
  mounted () {
    this.pageHeight() //  初始化页面高度
    this.activeName = this.$route.meta.id
  },
  computed: {
  },
  methods: {
    //  监听路由变化
    getPath () {
      return this.$route.path == '/Gmap' || '/cesium' ? this.contentPadding = '0px' : this.contentPadding = '10px'
    },
    //  组件切换
    navigateTo (data) {
      this.$router.push(data.url)
    },
    //  初始化页面高度
    pageHeight () {
      this.publicHeight = document.body.clientHeight - 50 + 'px'
      this.contentWidth = document.body.clientWidth - 210 + 'px'
      var that = this
      window.onresize = function () {
        that.contentWidth = document.body.clientWidth - 210 + 'px'
        that.publicHeight = document.body.clientHeight - 50 + 'px'
      }
    }
  }
}
</script>

<style scoped>
  .mainContent .page{
    height: 100%;
  }
  .mainContent .header{
    height: 50px;
    background: #303643;
  }
</style>
